<keira-top-bar [selected]="handlerService.selected" [selectedName]="handlerService.selectedName" [isNew]="handlerService.isNew" />

<div class="container-fluid">
  @if (editorService.loading) {
    <span [translate]="'LOADING'"></span>
  }

  @if (editorService.form && !!editorService.loadedEntityId && !editorService.loading) {
    <div>
      <div class="content-block">
        <keira-query-output [docUrl]="docUrl" [editorService]="editorService" (executeQuery)="save($event)" />
      </div>
      <form [formGroup]="editorService.form" class="form-group edit-form">
        <div class="content-block">
          <div class="row">
            <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
              <label class="control-label" for="ID">ID</label>
              <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'OTHER_TEXTS.BROADCAST_TEXT.ID' | translate"></i>
              <input [formControlName]="'ID'" id="ID" type="number" class="form-control form-control-sm" />
            </div>
            <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
              <label class="control-label" for="LanguageID">LanguageID</label>
              <keira-language-selector-btn
                [config]="{ name: 'LanguageID' }"
                [control]="editorService.form.controls.LanguageID"
                [disabled]="editorService.form.controls.LanguageID.disabled"
              />
              <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'OTHER_TEXTS.BROADCAST_TEXT.LANGUAGE_ID' | translate"></i>
              <input [formControlName]="'LanguageID'" id="LanguageID" type="number" class="form-control form-control-sm" />
            </div>
            <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
              <label class="control-label" for="SoundEntriesId">SoundEntriesId</label>
              <keira-sound-entries-selector-btn
                [config]="{ name: 'SoundEntriesId' }"
                [control]="editorService.form.controls.SoundEntriesId"
                [disabled]="editorService.form.controls.SoundEntriesId.disabled"
              />
              <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'OTHER_TEXTS.BROADCAST_TEXT.SOUND_ENTRIES_ID' | translate"></i>
              <input [formControlName]="'SoundEntriesId'" id="SoundEntriesId" type="number" class="form-control form-control-sm" />
            </div>
            <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
              <label class="control-label" for="Flags">Flags</label>
              <input [formControlName]="'Flags'" id="Flags" type="number" class="form-control form-control-sm" />
            </div>
            <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
              <label class="control-label" for="EmotesID">EmotesID</label>
              <keira-single-value-selector-btn
                [control]="editorService.form.controls.EmotesID"
                [disabled]="editorService.form.controls.EmotesID.disabled"
                [config]="{ options: EMOTE, name: 'emote' }"
                [modalClass]="'modal-md'"
              />
              <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'OTHER_TEXTS.BROADCAST_TEXT.EMOTES_ID' | translate"></i>
              <input [formControlName]="'EmotesID'" id="EmotesID" type="number" class="form-control form-control-sm" />
            </div>
          </div>
          <div class="row">
            <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
              <label class="control-label" for="EmoteID1">EmoteID1</label>
              <keira-single-value-selector-btn
                [control]="editorService.form.controls.EmoteID1"
                [disabled]="editorService.form.controls.EmoteID1.disabled"
                [config]="{ options: EMOTE, name: 'emote' }"
                [modalClass]="'modal-md'"
              />
              <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'OTHER_TEXTS.BROADCAST_TEXT.EMOTE_ID_N' | translate"></i>
              <input [formControlName]="'EmoteID1'" id="EmoteID1" type="number" class="form-control form-control-sm" />
            </div>
            <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
              <label class="control-label" for="EmoteDelay1">EmoteDelay1</label>
              <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'OTHER_TEXTS.BROADCAST_TEXT.EMOTE_DELAY_N' | translate"></i>
              <input [formControlName]="'EmoteDelay1'" id="EmoteDelay1" type="number" class="form-control form-control-sm" />
            </div>
            <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
              <label class="control-label" for="EmoteID2">EmoteID2</label>
              <keira-single-value-selector-btn
                [control]="editorService.form.controls.EmoteID2"
                [disabled]="editorService.form.controls.EmoteID2.disabled"
                [config]="{ options: EMOTE, name: 'emote' }"
                [modalClass]="'modal-md'"
              />
              <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'OTHER_TEXTS.BROADCAST_TEXT.EMOTE_ID_N' | translate"></i>
              <input [formControlName]="'EmoteID2'" id="EmoteID2" type="number" class="form-control form-control-sm" />
            </div>
            <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
              <label class="control-label" for="EmoteDelay2">EmoteDelay2</label>
              <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'OTHER_TEXTS.BROADCAST_TEXT.EMOTE_DELAY_N' | translate"></i>
              <input [formControlName]="'EmoteDelay2'" id="EmoteDelay2" type="number" class="form-control form-control-sm" />
            </div>
            <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
              <label class="control-label" for="EmoteID3">EmoteID3</label>
              <keira-single-value-selector-btn
                [control]="editorService.form.controls.EmoteID3"
                [disabled]="editorService.form.controls.EmoteID3.disabled"
                [config]="{ options: EMOTE, name: 'emote' }"
                [modalClass]="'modal-md'"
              />

              <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'OTHER_TEXTS.BROADCAST_TEXT.EMOTE_ID_N' | translate"></i>
              <input [formControlName]="'EmoteID3'" id="EmoteID3" type="number" class="form-control form-control-sm" />
            </div>
            <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
              <label class="control-label" for="EmoteDelay3">EmoteDelay3</label>
              <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'OTHER_TEXTS.BROADCAST_TEXT.EMOTE_DELAY_N' | translate"></i>
              <input [formControlName]="'EmoteDelay3'" id="EmoteDelay3" type="number" class="form-control form-control-sm" />
            </div>
          </div>
          <div class="row">
            <div class="form-group col-12">
              <label class="control-label" for="MaleText">MaleText</label>
              <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'OTHER_TEXTS.BROADCAST_TEXT.MALE_TEXT' | translate"></i>
              <textarea [formControlName]="'MaleText'" id="MaleText" class="form-control form-control-sm" rows="5"></textarea>
            </div>
          </div>
          <div class="row">
            <div class="form-group col-12">
              <label class="control-label" for="FemaleText">FemaleText</label>
              <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'OTHER_TEXTS.BROADCAST_TEXT.FEMALE_TEXT' | translate"></i>
              <textarea [formControlName]="'FemaleText'" id="FemaleText" class="form-control form-control-sm" rows="5"></textarea>
            </div>
          </div>
        </div>
      </form>
    </div>
  }
</div>
